<template>
    <UxPopper placement="top" class="tooltip" :delay="100">
        <slot v-if="slotDefault"></slot>
        <svg-icon name="notify2" v-else />
        <div class="tooltip-content" slot="pop">
            <slot name="content" v-if="slotContent"></slot>
            <div v-else v-html="content"></div>
        </div>
    </UxPopper>
</template>
<script>
export default {
    name: "HoverAlert",
    props: {
        effect: {
            type: String,
            default: "dark",
        },
        content: {
            type: String,
            default: "Top 提示文字",
        },
        placement: {
            type: String,
            default: "top",
        },
    },
    data () {
        return {};
    },
    computed: {
        slotDefault () {
            return this.$slots.default && this.$slots.default.length > 0
        },
        slotContent () {
            return this.$slots.content && this.$slots.content.length > 0
        }
    },
    created () {
    }

};
</script>
<style lang="scss" scoped>
.tooltip {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    line-height: 14px;

    &::v-deep .popper-name {
        color: #f00;
        svg {
            width: 14px;
            height: 14px;
            color: #b8b8b8;
        }
    }

    &::v-deep .popper-content {
        font-size: 12px;
        background: rgba(0, 0, 0, 0.75);
        box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        padding: 11px 12px;
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        border: none;
        max-width: 800px;
        text-align: center;

        & > .arrow {
            background: none;
            &::before {
                background-color: transparent;
                border-width: 6px !important;
                transform: rotate(0deg);
                top: 4px;
                width: 0;
                height: 0;
                margin-left: -6px;
                left: 50%;
                border-style: solid;
                border-color: rgba(0, 0, 0, 0.75) transparent transparent !important;
            }
        }
    }
}

// .tooltip {
//     background: #f7f7f7;
//     border-radius: 5px;
//     border: 1px solid #f2f2f2;
//     font-size: 12px;

//     color: #fff;
//     .popper__arrow {
//         display: none;
//         border-bottom-color: white !important;
//     }
//     .popper__arrow:after {
//         border-bottom-color: white !important;
//     }
// }
</style>
